<template>
	<div class="table">
		<el-table ref="selecttable" :data="showData" border style="width: 100%" :header-cell-style="theader"
			:cell-style="tableRowStyle" @selection-change="handleSelectionChange" 
			@select="handleselect" id="box" v-loading="loadingFlag" :row-class-name="tableRowClassName">
			<el-table-column label="请选择"  :selectable='checkboxT' width="60" type="selection">
			</el-table-column>
			<el-table-column min-width="80" class-name="column" prop="collegeCode" label="院校代码">
			</el-table-column>
			<el-table-column width="170" prop="collegeName" label="院校名称">
			</el-table-column>
			<el-table-column label="专业代码" prop="professionalGroupCode" >
			</el-table-column>
			<el-table-column prop="professionalGroup" label="专业名称" >
			</el-table-column>
			<el-table-column prop="controlLine" label="控制线">
			</el-table-column>
<!-- 			<el-table-column prop="planEnrollment" label="计划数">
			</el-table-column> -->
			<el-table-column min-width="110px" prop="minCastScore" label="最低投档分数">
			</el-table-column>
			<el-table-column min-width="110px" prop="minScoreDifference" label="最低投档分差">
			</el-table-column>
			<el-table-column prop="ranking" label="排名">
			</el-table-column>
			<el-table-column width="115px" label="专业链接">
				<template slot-scope="scope">
					<a :href="scope.row.introduction" v-show="scope.row.introduction!=null" target="_blank">链接</a>
				</template>
			</el-table-column>
		</el-table>
		<div class="showmore" @click="showmoretrue()" v-bind:style='{borderColor:this.color,color:this.color}'
			v-if="showMore==1">
			{{sentence}}
		</div>
	</div>

</template>

<script>
	import timeCalculate from '../common/timeCalculate'
	export default {
		props: {
			color: String,
			tableData: Array,
			tableIndex: Number,
			showMore: Number,
			lazyMode: Boolean,
			basicstatus: Boolean,
			//新高考显示模式
			newExam: Boolean,
			serverselect: Array,
		},
		data() {
			return {
				flag: false,
				showData: [],
				sentence: '更多志愿',
				selection: [],
				loadingFlag: false,
				finalChosenData: [],
				selectdata: [],
				status: true,
				showscore: '',
				Score:""
			}
		},
		methods: {
			//el-table表头样式自定义回调函数
			theader({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				return `font-size:0.103rem;font-family:Noto Sans SC;font-weight: 100;color: #FFFFFF;height:0.338542rem;padding-left:10px;text-align:left;border-left:none;border-right:none;background-color:${this.color};`
			},
			//el-table元素样式自定义回调函数
			tableRowStyle({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				if (columnIndex == 7 || columnIndex === 8) {
					return {
						'height': '0.364583rem',
						'text-align': 'left',
						'font-size': '0.087rem',
						'font-family': 'Noto Sans SC',
						'font-weight': '600',
						'padding-left': '8px !important',
						'border-bottom': `${this.color} 1px solid`,
						'border-left': 'none',
						'border-right': 'none',
						'color': '#3A3A3A'
					}
				}
				return {
					'height': '0.364583rem',
					'text-align': 'left',
					'font-size': '0.087rem',
					'font-family': 'Noto Sans SC',
					'font-weight': '300',
					'padding-left': '8px !important',
					'border-bottom': `${this.color} 1px solid`,
					'border-left': 'none',
					'border-right': 'none',
					'color': '#3A3A3A',
				}
			},
			showmoretrue() {
				if (this.flag == false) {
					this.loadingFlag = true
					setTimeout(() => {
						this.loadingFlag = false
					}, 200)
					// this.showMore=0
					this.$emit('showMore：0'); //通知父组件改变。
					this.flag = true
					this.sentence = '收起'
					this.status = true
					// this.showmore()
				} else {
					// this.showData = this.tableData
					this.flag = false,
						this.sentence = '更多志愿'
					// this.chosenSelected()
					//  this.comparision()
					this.status = false
				}
			},
			//显示更多一次获取完数据
			showmore() {
				let year = timeCalculate.timeCalculate() - 1
				let formData = JSON.parse(sessionStorage.form)
				let equivalent = JSON.parse(sessionStorage.equivalent)
				if (this.showData[0].volunteerGroup == null) {
					this.$axios.post(`${this.baseURL}/parallelVolunteering/getMyParallelVolunteeringSecondTime`, {
							batch: formData.batch,
							equivalentScore: equivalent.score,
							provinceId: formData.provinceId,
							subject: formData.subject,
							username: formData.username,
							year: formData.referenceYear,
							voluntaryNature: this.showData[0].voluntaryNature,
							volunteerGroup: 0,
						})
						.then(res => {
							// console.log(res.data.data);
							
							this.loadingFlag = false
							this.showData = res.data.data
							this.showscore = res.data.data[0].minCastScore //将获取每组第一个分数拿出
							this.chosenSelected()
							// this.comparision()
							this.status = false
							this.$emit('totalNumber',"1")
						})
				} else {
					this.$axios.post(`${this.baseURL}/parallelVolunteering/getMyParallelVolunteeringSecondTime`, {
							batch: formData.batch,
							equivalentScore: equivalent.score,
							provinceId: formData.provinceId,
							subject: formData.subject,
							username: formData.username,
							year: formData.referenceYear,
							voluntaryNature: this.showData[0].voluntaryNature,
							volunteerGroup: this.showData[0].volunteerGroup,
						})
						.then(res => {
							// console.log(res.data.data);
							let number =new Array()
							number.push(this.showData[0].volunteerGroup)
							this.loadingFlag = false
							this.showData = res.data.data
							this.showscore = res.data.data[0].minCastScore //将获取每组第一个分数拿出
							this.chosenSelected()
							// this.comparision()
							this.status = false
							
							number.push(Number(res.data.token))
							this.$emit('totalNumber',number)
					
						})
				}
			},
			
			//根据页面的数据来判断是否要禁用复选框
			checkboxT(row) {
			      if (row.collegeName == null) {
			        return false;//禁用
			      } else {
			        return true;//不禁用
			      }
			    },
			//判断条件隐藏table整行内容(初始的tabledata为未展开时需展示的内容，showmore后数据内容改变，通过此判断哪些需要隐藏)
			tableRowClassName({
				row,
				rowIndex
			}) {
				// console.log(row)
				// if(this.status == false){
				//   if(rowIndex>5){
				//     return 'warning-row';
				//   }
				//   return '';
				// }
				if (this.status == false) {
					if (row.minCastScore != this.showscore) {
						return 'warning-row';
					}
					if(this.Score==null){
						return 'warning-row';
					}
					return '';
				}

			},
			//复选框选中操作selectdata数组
			handleselect(selection, row) {
				// 判断selectdata是否已经存在当前项
				let existence = false
				this.selectdata.forEach(item => {
					if (item.collegeName + item.collegecode === row.collegeName + row.collegecode) {
						existence = true
					}
				})
				if (existence) {
					// 若存在，代表操作是 取消选中
					this.handleDelItem(row)
				} else {
					// 反之，选中某项
					this.selectdata.push(row)
				}
			},
			//对selectdata取消选中操作
			handleDelItem(row) {
				let index = -1
				this.selectdata.forEach((item, idx) => {
					if (item.collegeName + item.collegecode === row.collegeName + row.collegecode) {
						index = idx
					}
				})
				if (index >= 0) {
					this.selectdata.splice(index, 1)
				}
			},
			//对table中showdata对比操作获取具体选中的复选框
			comparision() {
				// console.log(this.selectdata)
				let newrows = []
				this.$nextTick(() => {
					this.showData.forEach(row => {
						this.selectdata.forEach(item => {
							if (item.collegeName + item.collegecode === row.collegeName + row
								.collegecode) {
								this.$refs.selecttable.toggleRowSelection(row, true);
							}
						})
					})
				})


			},
			//多选框
			handleSelectionChange(val) {
				this.selection = []
				this.selection = val
				this.selection.push(this.tableIndex)
				// alert(this.tableIndex)
				// console.log(this.selection)
				let a = 0
				for (var i = 0; i < this.selection.length; i++) {
					for (var j = i + 1; j < this.selection.length; j++) {
						if (this.selection[i].ids > this.selection[j].ids) {
							a = this.selection[i]
							this.selection[i] = this.selection[j]
							this.selection[j] = a
						}
					}
				}
				this.$emit('selection', this.selection)
			},
			//预勾选之前勾选过的数据
			chosenSelected() {
				if (sessionStorage.getItem('tableSelection')) {
					// console.log(this.tableIndex+1)
					let chosenData = JSON.parse(sessionStorage.tableSelection)
					this.selectdata = chosenData
					chosenData.forEach(el => {
						//从session保存的选中数据中分离出属于当前表格的数据
						if (el.volunteerGroup == this.tableIndex + 1) {
							this.finalChosenData.push(el)
						}
					})
					//默认选中使用了DOM操作且数据需要后端请求 放在$nexttick中完成异步更新 （必须在$nexttick中否则预选中多选框不生效）
					this.$nextTick(() => {
						// this.comparision()
						this.finalChosenData.forEach(el => {
							this.showData.forEach(ele => {
								//判断学校代码是否相同勾选数据
								if (el.collegeName + el.professionalGroupCode === ele
									.collegeName + ele.professionalGroupCode)
									this.$refs.selecttable.toggleRowSelection(ele, true);
							})
						})
					})
				} else {
					//$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM
					// this.$nextTick(()=>{
					//   this.comparision()
					// })
					//判断无缓存即为刚登陆
					let chosenData = this.serverselect
					// console.log(this.serverselect)
					this.selectdata = chosenData
					if (chosenData != undefined) {
						chosenData.forEach(el => {
							//从session保存的选中数据中分离出属于当前表格的数据
							if (el.volunteerGroup == this.tableIndex + 1) {
								this.finalChosenData.push(el)
							}
						})
						//默认选中使用了DOM操作且数据需要后端请求 放在$nexttick中完成异步更新 （必须在$nexttick中否则预选中多选框不生效）
						this.$nextTick(() => {
							// this.comparision()
							this.finalChosenData.forEach(el => {
								this.showData.forEach(ele => {
									//判断学校代码是否相同勾选数据
									if (el.collegeName + el.professionalGroupCode === ele
										.collegeName + ele.professionalGroupCode)
										this.$refs.selecttable.toggleRowSelection(ele, true);
								})
							})
						})
					}


				}
			}
		},
		mounted() {
			// console.log(this.tableData);
			this.showData = this.tableData
			console.log(this.tableData)
			this.Score = this.tableData[0].minCastScore //将获取每组第一个分数拿出
			// console.log(this.showData);
			if (!this.basicstatus) {
				// if (this.showscore != null) {
					this.showmore()
				// } 
				// else {
				// 	console.log(this.showData)
				// }
			}
		}

	}
</script>
<style>
	.el-checkbox__inner {
		width: 30px;
		height: 30px;
		border: 3px solid #DCDFE6 !important;
	}

	.table {
		width: 100%;
	}

	#box>>>thead .el-table-column--selection .cell {
		display: none;
	}

	#box>>>.el-checkbox__inner {
		width: 21px;
		height: 21px;
	}

	#box>>>.el-checkbox__inner::after {
		height: 11px;
		left: 8px;
		top: 2px;
	}

	/* .el-table--border:after,
.el-table--group:after,
.el-table:before{
    background-color: rgba(51, 170, 255, 1);
} */
	.el-table .warning-row {
		display: none;
	}

	.showmore {
		width: 100%;
		height: 60px;
		text-align: center;
		font-size: 22px;
		font-family: Source Han Sans;
		font-weight: 400;
		color: #33AAFF;
		line-height: 60px;
		border: 1px solid rgba(51, 170, 255, 1);
		cursor: pointer;
		transition-duration: 0.3s;
	}

	.el-checkbox__inner::after {
		height: 13px !important;
		left: 10px !important;
	}

	.showmore:hover {
		background-color: rgba(246, 246, 246, 1);
	}

	.column {
		width: 150px;
	}
</style>
